@charset "utf-8";

/* UNIVERSAL */
  @font-face {
    font-family: 'Gudea';
    src: url('Gudea-Regular.eot');
    src: url('Gudea-Regular.eot?#iefix') format('embedded-opentype'),
       url('Gudea-Regular.ttf')  format('truetype');
  }

  * {
    font-family: 'Gudea', sans-serif;
    font-size: 14px;
    color: #fff;
    -moz-user-select: none;
  }

  html {
    background-color: #000;
  }

  h1 {
    font-size: 24px;
    color: #ffffff;
    letter-spacing: 1px;
  }

  h2 {
    font-size: 16px;
    color: #ffffff;
    letter-spacing: 1px;
    font-weight: 400;
  }

  p {
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 21px;
  }

  a {
    outline: none;
    border: 0;
  }

  img {
    border: 0;
  }

  body {
    overflow: hidden;
  }

  html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

  ::-webkit-input-placeholder { /* WebKit browsers */
    color: #fff;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #fff;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #fff;
  }
  :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #fff;
  }

/* TETRADIC COLOR SCHEME http://colorschemedesigner.com/#5w42aqBCKw0w0 */

/* END UNIVERSAL */

/* BODY */

  /* SPLASH */
    #splash {
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: #000;
      z-index: 1000;
      cursor: pointer;
      animation: splash 5s ease forwards;
      -webkit-animation: splash 5s ease forwards;
      transition: none;
    }
      #splash div {
        position: absolute;
        top: 50%;
        width: 100%;
        margin: auto;
        transform: translateY(-50%);
      }
      #splash span {
        overflow: hidden;
        display: block;
        height: 48px;
        margin-bottom: 40px;
      }
        #splash p {
          display: block;
          overflow: hidden;
          position: relative;
          margin: auto;
          left:0; right: 0;
          font-size: 48px;
          line-height: normal;
          text-align: center;
          vertical-align: middle;
          opacity: 0;
        }
        #splashtext {
          letter-spacing: 5px;
          animation: splashtext 1s ease forwards;
          -webkit-animation: splashtext 1s ease forwards;
        }
        #splashlogo {
          letter-spacing: 16px;
          animation: splashlogo 2s ease 1.5s forwards;
          -webkit-animation: splashlogo 2s ease 1.5s forwards;
        }
        .splashout {
          animation: splashout 1s ease forwards;
          -webkit-animation: splashout 1s ease forwards;
        }
      /* SPLASH ANIMATION */
        /* SPLASH */
          @keyframes splash {
            0% {opacity: 1;}
            80% {opacity: 1;}
            99% {opacity: 0;}
            100%{opacity: 0; display: none;}
          }
          @-webkit-keyframes splash {
            0% {opacity: 1;}
            80% {opacity: 1;}
            99% {opacity: 0;}
            100% {opacity: 0; display: none;}
          }
        /* SPLASHTEXT */
          @keyframes splashtext {
            0% {opacity: 0;}
            100% {opacity: 1;}
          }
          @-webkit-keyframes splashtext {
            0% {opacity: 0;}
            100% {opacity: 1;}
          }
        /* SPLASHLOGO */
          @keyframes splashlogo {
            0% {opacity: 0;}
            50% {opacity: 1; transform: translate3d(0, 0, 0);}
            100% {opacity: 1; transform: translate3d(0, 14px, 0);}
          }
          @-webkit-keyframes splashlogo {
            0% {opacity: 0;}
            50% {opacity: 1; -webkit-transform: translate3d(0, 0, 0);}
            100% {opacity: 1; -webkit-transform: translate3d(0, 14px, 0);}
          }
      /* END SPLASH ANIMATION */
  /* END SPLASH */

  /* BACKGROUND */
    #bg {
      background-image:url('../bg/rainbg.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-position:center;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -100;
      transition: none;
      -webkit-transition: none;
    }
      #bgfilter {
        height: 100%;
        width: 100%;
        box-shadow: inset 0 0 400px #000;
        -moz-box-shadow: inset 0 0 400px #000;
        -webkit-box-shadow: inset 0 0 400px #000;
      }
  /* END BACKGROUND */

  /* MAIN LOGO */
    #mainlogo img{
      position: absolute;
      top: 60px;
      left: 100px;
    }
  /* END MAIN LOGO */

  /* UI CONTAINER */
    #ui-container {
      position: absolute;
      width: 100%;
      height: 100%;
    }
      #ui-frame {
        position: absolute;
        margin: auto;
        width: 100%;
        top: 50%;
        transform: translateY(-75%);
      }
  /* END UI CONTAINER */

  /* MUTE BUTTON */
    #mute-frame {
      width: 960px;
      height: 30px;
      margin: auto;
    }
    #mute {
      position: relative;
      margin-left: 750px;
      width: 180px;
      height: 30px;
      background-color: #2D2D2D;
      cursor: pointer;
    }
      #mute img {
        background-color: transparent;
        border: 0;
        margin: 5px 0 0 80px;
        position: relative;
        animation: naviconslidereverse .25s ease forwards;
        -webkit-animation: naviconslidereverse .25s ease forwards;
      }
      #mute span {
        position: absolute;
        margin: 6px 0 0 -20px;
        opacity: 0;
      }
        #mute:hover  img {
          animation: naviconslide .25s ease forwards;
          -webkit-animation: naviconslide .25s ease forwards;
          transition: none;
          -webkit-transition: none;
        }
        #mute:hover  span {
          opacity: 1;
        }
  /* END MUTE BUTTON */

  /* OPEN CAROUSEL */
  /**************************************
  jQuery Open Carousel

  Copyright (c) 2013 Justin McCandless (justinmccandless.com)

  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  ***************************************/
  .ocarousel {
    width: 960px;
    margin: auto;
    display: block;
  }
    .ocarousel_window {
      overflow: hidden;
      white-space: nowrap;
      width: 900px;
      height: 180px;
      margin-left: auto;
      margin-right: auto;
    }
      .ocarousel_window_slides {
        position: relative;
        margin: 0 auto;
        overflow: hidden;
        width: 50000px;
        white-space: nowrap;
        transition: none;
        -webkit-transition: none;
      }
        .ocarousel_window_slides div {
          text-decoration: none;
          text-align: center;
          color: black;
          display: inline-block;
        }
        .ocarousel_window_slides>div {
          float: left;
          white-space: normal;
        }
  /* END OPEN CAROUSEL */

    /* WRAPPER */
    .wrapper {
      position: relative;
      background-color: #fff;
      box-sizing: border-box;
      cursor: pointer;
    }
      .wrapper:hover {
        box-shadow: inset 0 0 20px #ddd;
        -webkit-box-shadow: inset 0 0 20px #ddd;
      }
      .wrapper:active {
        box-shadow: inset 0 0 20px #888;
        -webkit-box-shadow: inset 0 0 20px #888;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
      }

      .wrapper:hover .imgdrop {
        animation: icondrop .25s ease forwards;
        -webkit-animation: icondrop .25s ease forwards;
        transition: none;
        -webkit-transition: none;
      }
      .wrapper:hover p{
        opacity: 0;
      }
  /* END WRAPPER */

  /* SOUND BUTTONS */
    .sound-button {
      width: 180px;
      height: 180px;
    }
      .sound-button img{
        background-color: #fff;
        margin-top: 53px;
        animation: icondropreverse .25s ease forwards;
        -webkit-animation: icondropreverse .25s ease forwards;
      }
      .sound-button img:first-child {
        z-index: 0;
      }
      .sound-button p {
        color: #000;
        text-align: center;
        margin-top: 10px;
      }
    /* Shows active state here */
    .pause {
      box-shadow: inset 0 0 20px #888;
      -webkit-box-shadow: inset 0 0 20px #888;
    }
    img.pauseicon {
      position: absolute;
      margin: 53px 0 0 -55px;
      animation: iconactive-pulse 10s ease infinite;
      -webkit-animation: iconactive-pulse 10s ease infinite;
      z-index: -1;
    }
      /* ICON DROP */
        @keyframes icondrop {
          100% {transform: translate3d(0, 10px, 0);}
        }
        @-webkit-keyframes icondrop {
          100% {-webkit-transform: translate3d(0, 10px, 0);}
        }
          /* ICON DROP REVERSE */
          @keyframes icondropreverse {
            0% {transform: translate3d(0, 10px, 0);}
          }
          @-webkit-keyframes icondropreverse {
            0% {-webkit-transform: translate3d(0, 10px, 0);}
          }
      /* END ICON DROP */

      /* ICONACTIVE PULSE */
        @keyframes iconactive-pulse {
          0% {opacity: 0;}
          20% {opacity: 0;}
          40% {opacity: 1;}
          70% {opacity: 1;}
          90% {opacity: 0;}
          100% {opacity: 0;}
        }
        @-webkit-keyframes iconactive-pulse {
          0% {opacity: 0;}
          20% {opacity: 0;}
          40% {opacity: 1;}
          70% {opacity: 1;}
          90% {opacity: 0;}
          100% {opacity: 0;}
        }
  /* END ICON */

  /* SCROLL BUTTONS */
    .soundscroll {
      position: absolute;
      background-color: #2D2D2D;
      width: 30px;
      height: 180px;
      color: transparent;
    }
      .soundscroll img {
        background: transparent;
        margin: 68px 0 0 10px;
        position: relative;
      }

        #soundscroll-right {
          margin: -180px 0 0 930px;
        }
          #soundscroll-right img {
            animation: rightslidereverse .1s ease forwards;
            -webkit-animation: rightslidereverse .1s ease forwards;
          }
          #soundscroll-right:hover img {
            animation: rightslide .1s ease forwards;
            -webkit-animation: rightslide .1s ease forwards;
            transition: none;
            -webkit-transition: none;
          }
          #soundscroll-right:active img {
            animation: rightslidereverse .1s ease forwards;
            -webkit-animation: rightslidereverse .1s ease forwards;
          }

            #soundscroll-left img {
              animation: leftslidereverse .1s ease forwards;
              -webkit-animation: leftslidereverse .1s ease forwards;
            }
            #soundscroll-left:hover img {
              animation: leftslide .1s ease forwards;
              -webkit-animation: leftslide .1s ease forwards;
              transition: none;
              -webkit-transition: none;
            }
            #soundscroll-left:active img {
              animation: leftslidereverse .1s ease forwards;
              -webkit-animation: leftslidereverse .1s ease forwards;
              }
            #soundscroll-left:active {
              background-color: #2D2D2D;
              transition: none;
              -webkit-transition: none;
            }

        /* SLIDER BUTTONS */
          /* RIGHT SLIDER */
            @keyframes rightslide {
              100% {transform: translate3d(2px, 0, 0);}
            }
            @-webkit-keyframes rightslide {
              100% {-webkit-transform: translate3d(2px, 0, 0);}
            }
            /* RIGHT SLIDER REVERSE*/
              @keyframes rightslidereverse {
                0% {transform: translate3d(2px, 0, 0);}
              }
              @-webkit-keyframes rightslidereverse {
                0% {-webkit-transform: translate3d(2px, 0, 0);}
              }
          /* LEFT SLIDER */
            @keyframes leftslide {
              100% {transform: translate3d(-2px, 0, 0);}
            }
            @-webkit-keyframes leftslide {
              100% {-webkit-transform: translate3d(-2px, 0, 0);}
            }
            /* LEFT SLIDER REVERSE*/
              @keyframes leftslidereverse {
                0% {transform: translate3d(-2px, 0, 0);}
              }
              @-webkit-keyframes leftslidereverse {
                0% {-webkit-transform: translate3d(-2px, 0, 0);}
              }
        /* END SLIDER BUTTONS */
  /* END SCROLL BUTTONS */

  /* NAV */
    #navcontainer {
      width: 960px;
      height: 60px;
      margin: auto;
    }
      nav {
        width: 900px;
        height: 60px;
        margin: auto;
      }
          nav ul li {
            text-decoration:none;
            display: block;
            width: 180px;
            height: 60px;
            float: left;
          }
            nav span {
              position: absolute;
              margin: 22px 0 0 -20px;
              opacity: 0;
            }
              nav ul li:hover > img, nav ul li:hover > a img {
                animation: naviconslide .25s ease forwards;
                -webkit-animation: naviconslide .25s ease forwards;
                transition: none;
                -webkit-transition: none;
              }
              nav  ul  li:hover > span {
                opacity: 1;
              }
              nav  ul  li:hover > a span {
                opacity: 1;
              }
            nav ul li a{
              text-decoration: none;
              display: block;
              width: 180px;
              height: 60px;
              margin: auto;
            }
            nav ul li img {
              background-color: transparent;
              border: 0;
              margin: 20px 0 0 80px;
              position: relative;
              animation: naviconslidereverse .25s ease forwards;
              -webkit-animation: naviconslidereverse .25s ease forwards;
            }
              /* NAV SLIDE ANIMATIONS */
                @keyframes naviconslide {
                  100% {transform: translate3d(-30px, 0, 0);}
                }
                @-webkit-keyframes naviconslide {
                  100% {-webkit-transform: translate3d(-30px, 0, 0);}
                }
                @keyframes naviconslidereverse {
                  0% {transform: translate3d(-30px, 0, 0);}
                }
                @-webkit-keyframes naviconslidereverse {
                  0% {-webkit-transform: translate3d(-30px, 0, 0);}
                }
              nav ul ul {
                position: absolute;
                width: 180px;
                transition: none;
                -webkit-transition: none;
              }
                nav ul ul li:hover span {
                  opacity: 1;
                }

    /* MENU */
      #menu {
        background-color: #2D2D2D;
      }
        #menu li {
          background-color: #2D2D2D;
        }
      /* MENU NAV */
        #menudrop {
          width: 900px;
          height: 180px;
          position: relative;
          z-index: 200;
          transition: none;
          -webkit-transition: none;
          background-color: #222;
        }
        #menunav {
          width: 180px;
          height: 180px;
          display: block;
          cursor: pointer;
        }
          #menunav ul {
            width: 180px;
            height: 180px;
            position: relative;
            top: 0; left: 0; right: 0; bottom: 0;
            margin-left: 0;
          }
          #menunav li{
            height: 60px;
            display: block;
          }
            #menunav li:hover {
              background-color: #222;
            }
            #menunav li p{
              margin-top: 18px;
              display: block;
              text-align: center;
            }
          /* ABOUT */
            #aboutdesc {
              width: 720px;
              height: 180px;
              background-color: #222;
              margin: -180px 0 0 180px;
              position: absolute;
              z-index: 1;
              opacity: 1;
            }
              #aboutdesc img {
                width: 140px;
                margin: 26px 0 0 290px;
                animation: none;
                -webkit-animation: none;
              }
              #aboutdesc p {
                margin: 0 80px;
                text-align: center;
              }
          /* END ABOUT */

          /* KNOWLEDGE */
            #knowledgedesc {
              width: 720px;
              height: 180px;
              background-color: #222;
              margin: -180px 0 0 180px;
              position: absolute;
              opacity: 0;
            }
              #knowledgedesc ol {
                width: 100%;
                height: 100%;
              }
              #knowledgedesc li {
                width: 180px;
                height: 100%;
                display: inline-block;
                background-color: #222;
              }
                #knowledgedesc li:hover {
                  background-color: #2D2D2D;
                }
                #knowledgedesc li a {
                  height: 130px;
                  width: 130px;
                  padding: 20px;
                  text-align: center;
                }
                  #knowledgedesc li a p {

                  }
          /* END KNOWLEDGE */

          /* CREDITS */
            #creditsdesc {
              width: 720px;
              height: 180px;
              position: absolute;
              margin: -180px 0 0 180px;
              opacity: 0;
            }
              #creditsdesc .nametag {
                width: 180px;
                height: 180px;
                text-align: center;
                float: left;
                display: block;
                background-color: #222;
              }
                #creditsdesc .nametag:hover {
                  background-color: #2D2D2D;
                }
                #creditsdesc .nametag:hover p, .nametag:hover h2 {
                  opacity: 0.05;
                }
                #creditsdesc .nametag:hover .contact{
                  opacity: 0.9;
                }
                #creditsdesc .nametag h2:first-of-type {
                  margin-top: 50px;
                }
                .contact {
                  position: absolute;
                  top: 0;
                  opacity: 0;
                  width: 180px;
                  height: 180px;
                  background-color: transparent;
                }
                  .contact a{
                    display: block;
                    position: relative;
                    text-align: center;
                    height: 20px;
                    margin-top: 20px;
                    vertical-align: middle;
                  }
                    .contact a:first-of-type {
                      margin-top: 40px;
                    }
                    .contact img {
                      position: relative;
                      margin: 0 0 0 0;
                      vertical-align: bottom;
                    }
                    .contact a:hover img {
                      opacity: 0.4;
                    }

          /* END CREDITS */
    /* END MENU */

    /* MUSIC */
      #music, #music li {
        background-color: #ff932b;
      }
        #music > div {
          margin-left: -180px;
          width: 900px;
          height: 60px;
          background-color: #ff932b;
          position: relative;
          z-index: 100;
          transition: none;
          -webkit-transition: none;
        }
          #music  div {
            display: block;
            float: left;
            z-index: 100;
          }
          #music div img {
            animation: none;
            -webkit-animation: none;
          }
        /* MUSIC PLAYER CONTROLS */
          #sc-playpause {
            width: 180px;
            height: 60px;
            display: block;
            transition: all .25s ease;
            -webkit-transition: all .25s ease;
          }
            #sc-playpause img {
              cursor: pointer;
              position: absolute;
            }
          #sc-progress {
            width: 540px;
            height: 60px;
          }
            #sc-progress_bar_bg {
              height: 2px;
              width: 460px;
              margin: 6px 0 0 40px;
              background-color: #e58327;
            }
            #sc-progress_bar {
              height: 20px;
              width: 460px;
              margin: 20px 0 0 40px;
              cursor: pointer;
              position: absolute;
              transition: none;
              -webkit-transition: none;
            }
              #sc-progress_bar .ui-slider-range-min {
                height: 2px;
                width: 460px;
                margin-top: 10px;
                background-color: #fff;
                position: absolute;
                transition: none;
                -webkit-transition: none;
              }
                #sc-progress_bar .ui-slider-handle {
                  height: 14px;
                  width: 2px;
                  border-right: 2px solid #fff;
                  content: '';
                  color: transparent;
                  margin-top: 4px;
                  margin-left: -4px;
                  cursor: pointer;
                  position: relative;
                  transition: none;
                  -webkit-transition: none;
                }
            #sc-title {
              margin: 6px 0 0 40px;
              overflow: hidden;
              height: 18px;
              width: 460px;
            }
            #sc-time {
              position: absolute;
              margin: 38px 0 0 40px;
              width: 460px;
              height: 18px;
            }
              #sc-time_total {
                right: 0;
                position: absolute;
              }
          #sc-volume {
            width: 180px;
            height: 60px;
          }
            #sc-volume img {
              margin-left: 10px;
            }
            #sc-volume_bg {
              height: 2px;
              width: 120px;
              margin: -14px 0 0 40px;
              background-color: #e58327;
            }
            #sc-volume_slider {
              height: 20px;
              width: 120px;
              margin: -24px 0 0 40px;
              cursor: pointer;
              position: absolute;
              transition: none;
              -webkit-transition: none;
            }
              #sc-volume_slider .ui-slider-range-min {
                height: 2px;
                width: 120px;
                margin-top: 10px;
                background-color: #fff;
                position: absolute;
                transition: none;
                -webkit-transition: none;
              }
                #sc-volume_slider .ui-slider-handle {
                  height: 14px;
                  width: 2px;
                  border-right: 2px solid #fff;
                  content: '';
                  color: transparent;
                  margin-top: 4px;
                  margin-left: -4px;
                  cursor: pointer;
                  position: relative;
                  transition: none;
                  -webkit-transition: none;
                }
        /* END MUSIC PLAYER CONTROLS */

        /* SOUNDCLOUD SEARCH */
          #logo-soundcloud {
            width: 180px;
          }
            #logo-soundcloud a {
              width: 50px;
              position: relative;
            }
              #logo-soundcloud img {
                margin: 0;
                width: 100%;
                overflow: visible;
              }
          #search-frame input {
            background-color: transparent;
            border: none;
            vertical-align: bottom;
          }
            #search-frame input:focus{
              border: none;
              outline: none;
            }
              input#search {
                border-bottom: 2px solid #fff;
                width: 460px;
                margin: 15px 0 0 40px;
              }
                input#search:focus {
                  border-bottom: 2px solid #fff;
                }
                div#search-button {
                  height: 60px;
                  width: 180px;
                  float: right;
                  cursor: pointer;
                  transition: all .25s ease;
                  -webkit-transition: all .25s ease;
                }
                  #search-button:hover {
                    background-color: #e58327;
                    transition: all .25s ease;
                    -webkit-transition: all .25s ease;
                  }
                  #search-button img {
                    animation: none;
                    -webkit-animation; none;
                  }
          #results {
            position: relative;
            width: 900px;
            max-height: 120px;
            overflow-y: auto;
            overflow-x: hidden;
            margin-top: 23px;
            z-index: 100;
          }
            #results li {
              width: 900px;
              height: 40px;
              vertical-align: middle;
              cursor: pointer;
            }
              #results li:hover {
                background-color: #e58327;
              }
              #results li a {
                width: 620px;
                height: 40px;
                padding: 10px 20px 0 75px;
                float: left;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              #results li img {
                height: 30px;
                width: 30px;
                animation: none;
                -webkit-animation: none;
                vertical-align: middle;
                margin: -5px 115px 0 0;
              }
              #results li p {
                padding-top: 10px;
                text-align: center;
                }
        /* END SOUNDCLOUD SEARCH */
    /* END MUSIC */

    /* RANDOM */
      #random, #random li{
        background-color: #f3294d;
      }
    /* END RANDOM */

    /* TWITTER */
      #twitter, #twitter li {
        background-color: #54c9da;
      }
    /* END TWITTER */

    /* SUGGEST */
      #suggest, #suggest li {
        background-color: #88f15b;
      }
    /* END SUGGEST */
  /* END NAV */

  /* TIMER */
    #stopwatch {
      font-size: 48px;
      letter-spacing: 5px;
      text-align: center;
      position: absolute;
      margin: auto;
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
      text-shadow: 0px 0px 5px #000;
      z-index: -10;
    }
  /* END TIMER */

  /* SOUNDCLOUD EMBED */
    #soundcloud-player {
      height: 166px;
      width: 960px;
      margin: auto;
      right: 0; left: 0;
      position: absolute;
    }
      #scplayer {
        margin: auto;
        position: absolute;
        right: 0; left: 0;
      }
  /* END SOUNDCLOUD EMBED */
/* END BODY */

/* FOOTER */
  footer {
    position: absolute;
    bottom: 16px;
    width: 100%;
    z-index: 1;
  }
    footer p {
      text-align: center;
      white-space: nowrap;
      width: 960px;
      margin: auto;
    }
  .ad {
    margin: 0 auto 20px auto;
    text-align: center;
    width: 952px;
  }
/* END FOOTER */

/* EFFECTS */
  * {
    transition: all .25s ease;
    -webkit-transition: all .25s ease;
  }

  .idle {
    opacity: 0;
    transition: opacity 2s ease;
    -webkit-transition: opacity 2s ease;
  }
/* END EFFECTS */

/* SOUND VOLUME CONTROLS */
  .sound-volume {
    width: 20px;
    height: 130px;
    position: absolute;
    top: 20px;
    right: 5px;
    opacity: 0.2;
  }
    .sound-volume:hover {
      opacity: 1;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      -webkit-transform: rotate(0);
      -moz-transform: rotate(0);
      transform: rotate(0);
    }
    .sound-volume img {
      position: absolute;
      bottom: -20px;
      right: 2px;
      animation: none;
      -webkit-animation: none;
    }
    .sound-volume_bg {
      height: 130px;
      width: 2px;
      right: 9px;
      position: absolute;
      background-color: #ddd;
    }
    .sound-volume_slider {
      height: 130px;
      width: 20px;
      cursor: pointer;
      position: absolute;
      right: 0px;
      transition: none;
      -webkit-transition: none;
    }
      .sound-volume_slider .ui-slider-range-min {
        height: 130px;
        width: 2px;
        right: 9px;
        bottom: 0px;
        position: absolute;
        background: #007fd1;
        background: -webkit-gradient( linear, left bottom, left top, from( #007fd1 ), to( #33CCFF ) );
        background: -webkit-linear-gradient( bottom, #007fd1, #33CCFF );
        background: -moz-linear-gradient( bottom, #007fd1, #33CCFF );
        background: -ms-radial-gradient( bottom, #007fd1, #33CCFF );
        background: -o-linear-gradient( bottom, #007fd1, #33CCFF );
        background: linear-gradient( bottom, #007fd1, #33CCFF );
        transition: none;
        -webkit-transition: none;
      }
        .sound-volume_slider .ui-slider-handle {
          height: 2px;
          width: 14px;
          right: 3px;
          border-bottom: 2px solid #33ccff;
          content: '';
          color: #fff;
          cursor: pointer;
          position: absolute;
          transition: none;
          -webkit-transition: none;
        }
/* END SOUND VOLUME CONTROLS */